<template>
  <div class="Aside">
    <div class="box">
      <!-- 点击按钮切换图标 -->
      <el-button
        :icon="iconState ? Back : Right"
        color="#000"
        size="default"
        @click="iconClick()"
      ></el-button>
      <!-- 遍历数据 -->
      <div class="listBox" v-for="(item, index) in Arr" :key="index">
        <!-- 点击列表项切换图标 -->
        <div
          class="list"
          @click="iconFun(index)"
          @mouseleave="listLeave()"
          @mouseenter="listEnter(index)"
        >
          <!-- 显示头像 -->
          <el-icon
            color="#909399"
            :size="iconState ? 35 : 20"
            :style="iconState ? 'margin: auto' : ''"
            ><Avatar
          /></el-icon>
          <!-- 显示标题 -->
          <h4 style="color: #eeffff" v-show="!iconState">{{ item.authName }}</h4>
          <!-- 显示箭头 -->
          <el-icon
            color="#909399"
            v-show="!iconState"
            v-if="iconStateB[index]"
            @click="iconFun(index)"
            ><ArrowUp
          /></el-icon>
          <el-icon color="#909399" v-show="!iconState" v-else><ArrowDown /></el-icon>
        </div>
        <!-- 遍历子项 -->
        <div v-for="(i, j) in item.children" :key="j" class="A">
          <!-- 显示子项 -->
          <div
            class="listSon"
            v-show="iconStateB[index]"
            @click="listBoxCli(item.children[j].path)"
          >
            <el-icon color="#909399"><Avatar /></el-icon>
            <h5>{{ i.authName }}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Back, Right } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter'
import { useCounterStoreB } from '@/stores/temporary'
import { Avatar, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { getHomeAside } from '@/api/homeAside'

const Arr = ref()
const store = useCounterStore()
const storeB = useCounterStoreB()
const length = ref()
const iconState = ref(store.iconState)
const iconStateB = ref(Array(length.value).fill(false))

// 切换图标状态
const iconClick = () => {
  iconState.value = !iconState.value
  store.iconStateFun(iconState.value)
}

const iconFun = (index: number) => {
  // 切换列表项子项显示状态

  if (iconState.value === false) {
    iconStateB.value[index] = !iconStateB.value[index]
  }
}

// 鼠标离开列表项弹窗消失
const listLeave = () => {
  store.popUPFun(false)
}
const listSon = ref(false)
// 鼠标进入列表项弹窗出现
const listEnter = (index: number) => {
  if (iconState.value) {
    listSon.value = !listSon.value
    store.popUPFun(true)
    for (let i = 0; i < 1; i++) {
      const authNameObj = Arr.value[index].children
      store.authNameFun(authNameObj)
    }
  }
}

const res = ref()
// 请求数据
const getAside = async () => {
  res.value = await getHomeAside()
  Arr.value = res.value.data.data
  length.value = Arr.value.length
}
// 点击列表项切换路由
const listBoxCli = (path: string) => {
  storeB.pathFun(path)
}

onMounted(() => {
  getAside()
})
</script>

<style lang="scss" scoped>
.box {
  .el-button {
    width: 100%;
    border: none;
    background: #4a5064;
  }
  .listBox {
    width: 100%;
    height: 100%;
    background: #4a5064;
    .list {
      background: #333744;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8% 5%;
      h4 {
        user-select: none;
        margin: 0px 0px;
      }
    }
    .list:hover {
      background: #e6a23c33;
    }
    .listSon {
      padding: 6% 0%;
      display: flex;
      justify-content: center;
      align-items: center;
      h5 {
        user-select: none;
        color: #fff;
        margin: 0px 5%;
      }
    }
    .A:hover {
      background: #2b4b6b;
      .el-icon {
        color: #409fff;
      }
      h5 {
        color: #409eff;
      }
    }
  }
}
.Aside {
  background: #4a5064;
  .box {
    width: 100%;
    height: 100%;
  }
}
.Aside {
  background: #4a5064;
  .box {
    width: 100%;
    height: 100%;
    .el-button {
      width: 100%;
      border: none;
      background: #4a5064;
    }
  }
}
.no {
  display: none;
}
</style>
